<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="static/assets/global/plugins/bootstrap/css/bootstrap.min.css"/>
	<link rel="stylesheet" type="text/css" href="static/assets/global/css/components.css"/>
	<link rel="stylesheet" type="text/css" href="static/assets/admin/pages/css/login.css"/>
	<script type="text/javascript" src="static/assets/global/plugins/jquery-1.11.0.min.js"></script>
	<title></title>

</head>
<body>
	<div class="content">
		<h3 class="form-title">商品列表浏览</h3>

		<!-- 商品列表，是一个响应式的table -->
		<div class="table-responsive">
			<table class="table">
				<thead>
					<tr>
						<th>商品名称</th>
						<th>商品图片</th>
						<th>商品描述</th>
						<th>商品价格</th>
						<th>商品库存</th>
						<th>商品销量</th>
					</tr>
				</thead>
				<tbody id="container">
					
				</tbody>
			</table>
		</div>

	</div>



</body>
<script>

	//定义全局商品数据信息
	var g_itemList = [];

	jQuery(document).ready(function(){

			
			$.ajax({
				type:"GET",
				url:"http://localhost:8090/item/list",
				xhrFields:{withCredentials:true},
				success:function(data){
					if(data.status =="success"){
						//获取返回的商品json数组
						g_itemList = data.data;
						//自定义加载页面数据的函数
						reloadDom();
					}else{
						alert("获取商品信息失败！原因为"+data.data.errMsg);
					}

				},
				error:function(data){
					alert("获取商品信息失败！原因为"+data.responseText);
				}	
			});

	});

	//函数内取集合数组，拼数据表格
	function reloadDom(){

		for(var i=0;i<g_itemList.length;i++){
			var itemVO = g_itemList[i];
			var dom = "<tr data-id='"+itemVO.id+"' id='itemDetail"+itemVO.id+"'><td>"+itemVO.title+"</td><td><img src='"+itemVO.imgUrl+"' style='width:100px;height:auto'/></td><td>"+itemVO.description+"</td><td>"+itemVO.price+"</td><td>"+itemVO.stock+"</td><td>"+itemVO.sales+"</td></tr>";
			//遍历出一行后就追加到页面上,使用jquery的方法，要转为jquery对象
			$("#container").append($(dom));

			$("#itemDetail"+itemVO.id).on("click",function(e){
				//跳转到该商品详情页
				window.location.href="getitem.html?id="+$(this).data("id");
			});
		}
	}
</script>
</html>